<template> 


	<div class="miste">
      <!-- 首页头部 -->
       <header class="miste_header">
       	   <span class="hearder_search">
       	   	  <i class="iconfont icon-sousuo"></i>
       	   </span>
       	   <span class="header_title">
       	   	  <span class="header_title_text ellipsis">
       	   	  	   昌平区北七家宏福科技园(337省道北)
       	   	  </span>
       	   </span>
       	   <span class="header_login">
       	   	  <span class="header_login_text">
       	   	  	   登入|注册
       	   	  </span>
       	   </span>
       </header>
      <!-- 首页导航-->
       <nav class="miste_nav">
          <div class="swiper-container">
          	<div class="swiper-wraper">
          		 <div class="swiper-slide">

          		 		<a href="javascript:;" class="link_to_food">
          		 			<div class="food_container">
          		 				<img src="./img/nav/1.jpg">
          		 			</div>
          		 			<span>甜品饮品</span>
          		 		</a>
          		 		<a href="javascript:;" class="link_to_food">
          		 			<div class="food_container">
          		 				<img src="./img/nav/2.jpg">
          		 			</div>
          		 			<span>商超便利</span>
          		 		</a>
          		 		<a href="javascript:;" class="link_to_food">
          		 			<div class="food_container">
          		 				<img src="./img/nav/3.jpg">
          		 			</div>
          		 			<span>美食</span>
          		 		</a>
          		 		<a href="javascript:;" class="link_to_food">
          		 			<div class="food_container">
          		 				<img src="./img/nav/4.jpg">
          		 			</div>
          		 			<span>简餐</span>
          		 		</a>
          		 		<a href="javascript:;" class="link_to_food">
          		 			<div class="food_container">
          		 				<img src="./img/nav/5.jpg">
          		 			</div>
          		 			<span>新店特惠</span>
          		 		</a>
          		 		<a href="javascript:;" class="link_to_food">
          		 			<div class="food_container">
          		 				<img src="./img/nav/6.jpg">
          		 			</div>
          		 			<span>准时达</span>
          		 		</a>
          		 		<a href="javascript:;" class="link_to_food">
          		 			<div class="food_container">
          		 				<img src="./img/nav/7.jpg">
          		 			</div>
          		 			<span>预订早餐</span>
          		 		</a>
          		 		<a href="javascript:;" class="link_to_food">
          		 			<div class="food_container">
          		 				<img src="./img/nav/8.jpg">
          		 			</div>
          		 			<span>土豪推荐</span>
          		 		</a>
          		 		
          		 </div>

          		 <div class="swiper-slide" style="display:none">

          		 		<a href="javascript:;" class="link_to_food">
          		 			<div class="food_container">
          		 				<img src="./img/nav/9.jpg">
          		 			</div>
          		 			<span>甜品饮品</span>
          		 		</a>
          		 		<a href="javascript:;" class="link_to_food">
          		 			<div class="food_container">
          		 				<img src="./img/nav/10.jpg">
          		 			</div>
          		 			<span>商超便利</span>
          		 		</a>
          		 		<a href="javascript:;" class="link_to_food">
          		 			<div class="food_container">
          		 				<img src="./img/nav/11.jpg">
          		 			</div>
          		 			<span>美食</span>
          		 		</a>
          		 		<a href="javascript:;" class="link_to_food">
          		 			<div class="food_container">
          		 				<img src="./img/nav/12.jpg">
          		 			</div>
          		 			<span>简餐</span>
          		 		</a>
          		 		<a href="javascript:;" class="link_to_food">
          		 			<div class="food_container">
          		 				<img src="./img/nav/13.jpg">
          		 			</div>
          		 			<span>新店特惠</span>
          		 		</a>
          		 		<a href="javascript:;" class="link_to_food">
          		 			<div class="food_container">
          		 				<img src="./img/nav/14.jpg">
          		 			</div>
          		 			<span>预订早餐</span>
          		 		</a>
          		 		<a href="javascript:;" class="link_to_food">
          		 			<div class="food_container">
          		 				<img src="./img/nav/1.jpg">
          		 			</div>
          		 			<span>土豪推荐</span>
          		 		</a>
          		 		<a href="javascript:;" class="link_to_food">
          		 			<div class="food_container">
          		 				<img src="./img/nav/2.jpg">
          		 			</div>
          		 			<span>甜品饮品</span>
          		 		</a>
          		 		
          		 </div>



          	</div>
          	<div class="swiper-pagination">
          		
          	</div>
          </div>
       </nav>
      <!-- 首页附近商家 -->
       <div class="miste_shop_list">
       	<div class="shop_header">
       		<i class="iconfont icon-menu shop_icon"></i>
       		<span class="shop_header_title">附近商家</span>
       	</div>
       	<div class="shop_container">
       		 <ul class="shop_list">


       		 	<li class="shop_li">
       		 		<a href="javascript:;">

       		 			 <div class="shop_left">
       		 			 	<img class="shop_img" src="./img/shop/1.jpg">
       		 			 </div>

       		 			 <div class="shop_right">
       		 			 	  <section class="shop_detail_header">
       		 			 	  	<h4 class="shop_title ellipsis">锄禾日当午，汗滴禾下土</h4>
       		 			 	  	<ul class="shop_detail_ul">
       		 			 	  		<li class="supports">保</li>
       		 			 	  		<li class="supports">准</li>
       		 			 	  		<li class="supports">票</li>
       		 			 	  	</ul>

       		 			 	  </section>
       		 			 	  <section class="shop_rating_order">
       		 			 	  	<section class="shop_rating_order_left">

       		 			 	  		<div class="star star-24">
       		 			 	  		 <span class="star-item on"></span>
       		 			 	  		 <span class="star-item on"></span>
       		 			 	  		 <span class="star-item on"></span>
       		 			 	  		 <span class="star-item half"></span>
       		 			 	  		 <span class="star-item off"></span>
       		 			 	  		</div>

       		 			 	  		<div class="rating_section">3.6</div>
       		 			 	  		<div class="order_section">月售106单</div>
       		 			 	  	</section>

       		 			 	  	<section class="shop_rating_order_right">
       		 			 	  		<span class="delivery_style delivery_right">硅谷专送</span>
       		 			 	  	</section>

       		 			 	  </section>


       		 			 	  <section class="shop_distance">
       		 			 	  	<p class="shop_delivery_msg">
       		 			 	  		<span>¥20起送</span>
       		 			 	  		<span class="segmentation">/</span>
       		 			 	  		<span>配送费约¥5</span>
       		 			 	  	</p>
       		 			 	  </section>


       		 			 </div>
       		 		</a>
       		 	</li>
             		 	<li class="shop_li">
       		 		<a href="javascript:;">

       		 			 <div class="shop_left">
       		 			 	<img class="shop_img" src="./img/shop/2.jpg">
       		 			 </div>

       		 			 <div class="shop_right">
       		 			 	  <section class="shop_detail_header">
       		 			 	  	<h4 class="shop_title ellipsis">锄禾日当午，汗滴禾下土</h4>
       		 			 	  	<ul class="shop_detail_ul">
       		 			 	  		<li class="supports">保</li>
       		 			 	  		<li class="supports">准</li>
       		 			 	  		<li class="supports">票</li>
       		 			 	  	</ul>

       		 			 	  </section>
       		 			 	  <section class="shop_rating_order">
       		 			 	  	<section class="shop_rating_order_left">

       		 			 	  		<div class="star star-24">
       		 			 	  		 <span class="star-item on"></span>
       		 			 	  		 <span class="star-item on"></span>
       		 			 	  		 <span class="star-item on"></span>
       		 			 	  		 <span class="star-item half"></span>
       		 			 	  		 <span class="star-item off"></span>
       		 			 	  		</div>

       		 			 	  		<div class="rating_section">3.2</div>
       		 			 	  		<div class="order_section">月售106单</div>
       		 			 	  	</section>

       		 			 	  	<section class="shop_rating_order_right">
       		 			 	  		<span class="delivery_style delivery_right">硅谷专送</span>
       		 			 	  	</section>

       		 			 	  </section>


       		 			 	  <section class="shop_distance">
       		 			 	  	<p class="shop_delivery_msg">
       		 			 	  		<span>¥20起送</span>
       		 			 	  		<span class="segmentation">/</span>
       		 			 	  		<span>配送费约¥5</span>
       		 			 	  	</p>
       		 			 	  </section>


       		 			 </div>
       		 		</a>
       		 	</li>
       		 	<li class="shop_li">
       		 		<a href="javascript:;">

       		 			 <div class="shop_left">
       		 			 	<img class="shop_img" src="./img/shop/3.jpg">
       		 			 </div>

       		 			 <div class="shop_right">
       		 			 	  <section class="shop_detail_header">
       		 			 	  	<h4 class="shop_title ellipsis">锄禾日当午，汗滴禾下土</h4>
       		 			 	  	<ul class="shop_detail_ul">
       		 			 	  		<li class="supports">保</li>
       		 			 	  		<li class="supports">准</li>
       		 			 	  		<li class="supports">票</li>
       		 			 	  	</ul>

       		 			 	  </section>
       		 			 	  <section class="shop_rating_order">
       		 			 	  	<section class="shop_rating_order_left">

       		 			 	  		<div class="star star-24">
       		 			 	  		 <span class="star-item on"></span>
       		 			 	  		 <span class="star-item on"></span>
       		 			 	  		 <span class="star-item on"></span>
       		 			 	  		 <span class="star-item half"></span>
       		 			 	  		 <span class="star-item off"></span>
       		 			 	  		</div>

       		 			 	  		<div class="rating_section">3.6</div>
       		 			 	  		<div class="order_section">月售106单</div>
       		 			 	  	</section>

       		 			 	  	<section class="shop_rating_order_right">
       		 			 	  		<span class="delivery_style delivery_right">硅谷专送</span>
       		 			 	  	</section>

       		 			 	  </section>


       		 			 	  <section class="shop_distance">
       		 			 	  	<p class="shop_delivery_msg">
       		 			 	  		<span>¥20起送</span>
       		 			 	  		<span class="segmentation">/</span>
       		 			 	  		<span>配送费约¥5</span>
       		 			 	  	</p>
       		 			 	  </section>


       		 			 </div>
       		 		</a>
       		 	</li>
       		 	<li class="shop_li">
       		 		<a href="javascript:;">

       		 			 <div class="shop_left">
       		 			 	<img class="shop_img" src="./img/shop/4.jpg">
       		 			 </div>

       		 			 <div class="shop_right">
       		 			 	  <section class="shop_detail_header">
       		 			 	  	<h4 class="shop_title ellipsis">锄禾日当午，汗滴禾下土</h4>
       		 			 	  	<ul class="shop_detail_ul">
       		 			 	  		<li class="supports">保</li>
       		 			 	  		<li class="supports">准</li>
       		 			 	  		<li class="supports">票</li>
       		 			 	  	</ul>

       		 			 	  </section>
       		 			 	  <section class="shop_rating_order">
       		 			 	  	<section class="shop_rating_order_left">

       		 			 	  		<div class="star star-24">
       		 			 	  		 <span class="star-item on"></span>
       		 			 	  		 <span class="star-item on"></span>
       		 			 	  		 <span class="star-item on"></span>
       		 			 	  		 <span class="star-item half"></span>
       		 			 	  		 <span class="star-item off"></span>
       		 			 	  		</div>

       		 			 	  		<div class="rating_section">4.1</div>
       		 			 	  		<div class="order_section">月售106单</div>
       		 			 	  	</section>

       		 			 	  	<section class="shop_rating_order_right">
       		 			 	  		<span class="delivery_style delivery_right">硅谷专送</span>
       		 			 	  	</section>

       		 			 	  </section>


       		 			 	  <section class="shop_distance">
       		 			 	  	<p class="shop_delivery_msg">
       		 			 	  		<span>¥20起送</span>
       		 			 	  		<span class="segmentation">/</span>
       		 			 	  		<span>配送费约¥5</span>
       		 			 	  	</p>
       		 			 	  </section>


       		 			 </div>
       		 		</a>
       		 	</li>



       		 </ul>
       	</div>
       	

       </div>


	 </div> 

</template> 


<script> 


export default {

  name: '', 
  components: { } 


} 


</script>

<style lang="stylus" rel="stylesheet/stylus">
	@import "../../common/stylus/mixins.sty";
	@import "../../static/css/reset.css";
.miste
	width 100%
	.miste_header
		width 100%
		background-color #02a774
		height 45px
		position fixed
		left 0
		top 0
		z-index 5555
		.hearder_search
			width 10%
			height 50%
			position absolute
			left 15px
			top 50%
			transform translateY(-50%)
			.icon-sousuo
				font-size 25px
				color #fff
		.header_title
			position absolute
			top 50%
			left 50%
			transform translate(-50%, -50%)
			width 50%
			color #fff
			text-align center
			.header_title_text
				font-size 20px
				color #fff
				display block
	.header_login
		position absolute
		top 50%
		right 15px
		transform translateY(-50%)			
		color #fff
		font-size 14px
	.miste_nav
		background #fff
		margin-top 45px
		height 200px
		bottom-border-1px(#e4e4e4)
		.swiper-container
			width 100%
			height 100%
			.swiper-wraper
				width 100%
				height 100%
				.swiper-slide
					display flex
					justify-content center
					align-items flex-start
					flex-wrap wrap
					.link_to_food
						width 25%
						.food_container
							width 100%
							display block
							text-align center
							font-size 0
							padding-bottom 10px
							img
								height 50px
								width 50px
								display inline-block
					span
						width 100%
						display block
						text-align center
						font-size 13px
						color #666		
			.food_container>span.swiper-pagination-bullet-active
				background #02a774	
	.miste_shop_list
		top-border-1px(#e4e4e4)
		margin-top 10px
		background #fff
		width 100%
		.shop_header
			padding 10px 10px 0		
			.shop_icon
				color #999
				margin-left 5px
			.shop_header_title
				color #999
				font-size 14px
				line-height 20px	
		.shop_container		
			margin-bottom 50px
			.shop_list
				.shop_li
					bottom-border-1px(#e4e4e4)
					width 100%
					>a
						clearFix()
						display block
						width 100%
						padding 15px 8px
						box-sizing border-box
						.shop_left
							width 23%
							height 75px
							float left
							padding-right 10px
							box-sizing border-box
							.shop_img
								display block
								width 100%
								height 100%
						.shop_right
							float right
							width 77%
							.shop_detail_header
								clearFix()
								width 100%
								.shop_title
									float left
									width 200px
									color #333
									font-size 16px
									line-height 16px
									font-weight 700
									&::before
										content '品牌'
										display inline-block
										background-color #fdd930
										padding 2px 
										border-radius 2px
										margin-right 5px
										font-size 11px
										line-height 11px
								.shop_detail_ul
									float right
									margin-top 3px
									.supports
										float left
										font-size 10px
										padding 0px 2px
										border-radius 2px
										color #999
										border 1px solid #f1f1f1
							.shop_rating_order
								clearFix()
								width 100%
								margin 18px 0px 8px
								.shop_rating_order_left
									float left
									color #ff9a0d

									.star
										float left
										font-size 0
										.star-item
											display inline-block
											background-repeat no-repeat	
										&.star-48
											.star-item
												width 20px
												height 20px
												margin-right 20px
												background-size 20px 20px
												&:last-child
													margin-right 0px
												&.on
													bg-image('./img/stars/star48_on')
												&.half
													bg-image('./img/stars/star48_half')
												&.off
													bg-image('./img/stars/star48_off')			
										&.star-36	
											.star-item
												width 15px
												height 15px
												margin-right 15px
												background-size 15px 15px
												&:last-child
													margin-right 0
												&.on
													bg-image('./img/stars/star36_on')
												&.half
													bg-image('./img/stars/star36_half')	
												&.off
													bg-image('./img/stars/star36_off')		

										&.star-24
											.star-item
												width 10px
												height 10px
												background-size 10px 10px
												margin-right 3px
												&:last-child
													margin-right 0px
												&.on
													bg-image('./img/stars/star24_on')
												&.half
													bg-image('./img/stars/star24_half')
												&.off
													bg-image('./img/stars/star24_off')	
									.rating_section
										float left
										font-size 10px
										color #ff6000
										margin-left 4px	
									.order_section
										float right	
										font-size 10px
										color #666
										transform scale(0.8)
								.shop_rating_order_right
									float right	
									font-size 0
									.delivery_style
										font-size 12px
										padding 1px
										transform-origin 35px 0px
										transform scale(0.7)
										display inline-block
										border-radius 2px
									.delivery_right
										font-size 12px
										color #02a774	
										border 1px solid #02a774
											
							.shop_distance
								clearFix()
								width 100%
								font-size 12px	
								.shop_delivery_msg
									float left
									color #666

								  	
							  	
							  	 			
										





						



</style>